<template>
  <div class="home-elevator" :class="{ 'elevator-fix': y > 600 }">
    <ul>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li><RouterLink to="/">新鲜好物</RouterLink></li>
      <li @click="toScrollTop"><RouterLink to="/">顶部</RouterLink></li>
    </ul>
  </div>
</template>

<script>
import { useWindowScroll } from '@vueuse/core'
export default {
  name: 'HomeElevator',
  setup () {
    const { y } = useWindowScroll()
    function toTopAnimation (target) {
      let timer = null
      if (timer) clearInterval(timer)

      return (timer = setInterval(() => {
        console.log(12)
        const current =
          document.documentElement.scrollTop || document.body.scrollTop

        let step = (current - target) / 5
        step = step > 0 ? Math.ceil(step) : Math.floor(step)

        document.documentElement.scrollTop = current - step
        document.body.scrollTop = current - step

        if (Math.abs(target - current) <= Math.abs(step)) {
          document.documentElement.scrollTop = target
          document.body.scrollTop = target
          clearInterval(timer)
        }
      }, 30))
    }
    function toScrollTop () {
      toTopAnimation(0)
    }

    return { y, toScrollTop }
  }
}
</script>

<style lang="less" scoped>
.home-elevator {
  position: absolute;
  top: 800px;
  left: 50%;
  width: 700px;
  height: 420px;
  &.elevator-fix {
    position: fixed;
    top: 50px;
    margin-top: 50px;
    transition: margin-top 0.5s;
  }
  > ul {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 420px;
    display: flex;
    flex-direction: column;

    > li {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 60px;
      height: 60px;
      padding: 10px;
      background-color: #bbb;
      &:hover a {
        color: red;
      }
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(90deg, white, #aaa, #aaa, white);
        width: 50px;
        height: 1px;
        z-index: 2;
      }
    }
  }
}
</style>
